<template>
    <div class="container" :class="theme">
        <slot></slot>
        <div class="component-wrap">
            <div class="datav-box">
                <h4>智能设备概况</h4>
                <div class="datav-con device">
                    <div v-for="(item, index) in deviceName" :key="index" class="device-list">
                        <div class="device-num" :style="{background:color[index]+31,border:`1px solid ${color[index]}`}" >
                            <div><span class="num1">{{ devicenum[index] }}</span> / <span class="num2">{{devicetot[index]}}</span></div>
                        </div>
                        <p class="device-name">{{ item }}</p>
                    </div>
                </div>
                <div class="device-echarts">
                    <Echart id="leftCenterT" :options="deviceOption" ref="chartsT" />
                </div>
            </div>
            <div class="line"></div>
            <div class="datav-box" style="height: 200px;">
                <h4>设备种类统计</h4>
                <Echart id="leftCenterB" :options="deviceStatices" ref="chartsB" tooltip='yAxis' />
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { filtTimeList } from '@/utils/utils';
import { mapGetters} from "vuex";
export default {
    props: {
        theme: {
            type: String,
            default: ''
        }
    },
    computed:{
     ...mapGetters(["projects"])
    },
    data() {
        return {
            deviceList: [],
            // echarts
            deviceOption: {},
            deviceStatices: {},
            deviceName: ['塔吊', '升降机', '环境监测', '实名制', '水表', '电表', '视频'], // 所有设备名称
            color:['#84f0e5','#94f084','#84f0dc','#f0d384','#848bf0','#84d3f0'],
            devicetot: [], // 设备数量
            devicenum: [], // 当天在线设备数量
            deviceEarly: [], // 预警次数
            deviceOnline: [], // 在线率
            timeList: [],
            timeData: []
        }
    },
    created() {
        this.timeList = filtTimeList(6)
        this.getDeviceStatus()
    },
    mounted() {
        this.init2()
    },
    methods: {
        // 获取所有设备状态
        async getDeviceStatus() {
            let start = moment().subtract(6, 'day').format('YYYY-MM-DD')
            let end = moment().format('YYYY-MM-DD')
            // 塔机状态
            await this.$datav.towerStatus({ start, end,projectid:this.projects }).then(res => {
                this.deviceList.push(res.data)
                this.devicetot.push(res.data.tot)
                this.devicenum.push(res.data.online[0].num)
            })
            // 电梯状态
            await this.$datav.elevatorStatus({ start, end,projectid:this.projects }).then(res => {
                this.deviceList.push(res.data)
                this.devicetot.push(res.data.tot)
                this.devicenum.push(res.data.online[0].num)
            })
            // 扬尘状态
            await this.$datav.dustStatus({ start, end,projectid:this.projects }).then(res => {
                this.deviceList.push(res.data)
                this.devicetot.push(res.data.tot)
                this.devicenum.push(res.data.online[0].num)
            })
            // 实名制状态
            await this.$datav.attendanceStatus({ start, end,projectid:this.projects }).then(res => {
                this.deviceList.push(res.data)
                this.devicetot.push(res.data.tot)
                this.devicenum.push(res.data.online[0].num)
            })
            // 水表状态
            await this.$datav.waterStatus({ start, end,projectid:this.projects }).then(res => {
                this.deviceList.push(res.data)
                this.devicetot.push(res.data.tot)
                this.devicenum.push(res.data.online[0].num)
            })
            // 电表状态
            await this.$datav.electricStatus({ start, end,projectid:this.projects }).then(res => {
                this.deviceList.push(res.data)
                this.devicetot.push(res.data.tot)
                this.devicenum.push(res.data.online[0].num)
            })
            // 视频监控状态
            await this.$datav.videoStatus({ start, end,projectid:this.projects }).then(res => {
                this.deviceList.push(res.data)
                this.devicetot.push(res.data.tot)
                this.devicenum.push(res.data.online[0].num)
            })
            await this.filtDevice()
        },
        filtDevice() {
            let arr = []
            for (let i = 0; i < this.deviceList.length; i++) {
                this.deviceEarly.push(0)
                this.deviceList[i].online.map(item => {
                    item.num = Number(item.num)
                    arr.push(item)
                })
            }
            this.mergeArr(arr)
        },
        mergeArr(arr) {
            var newArr = [];
            arr.forEach(item => {
                var dataItem = item
                if (newArr.length > 0) {
                    var filterValue = newArr.filter(v => {
                        return v.partitiondate == dataItem.partitiondate
                    })
                    if (filterValue.length > 0) {
                        newArr.forEach(n => {
                            if (n.partitiondate == filterValue[0].partitiondate) {
                                n.num = filterValue[0].num + dataItem.num
                            }
                        })
                    } else {
                        newArr.push(dataItem)
                    }
                } else {
                    newArr.push(dataItem)
                }

            })

            let tot = this.devicetot.reduce(function(a, b){
                 return a + b;
            }, 0);
            newArr.map((item, i) => {
                this.deviceOnline.push(((item.num /tot) === Infinity ? 0 : (item.num /tot).toFixed(2) * 100))
                this.timeData.push(item.num)
            })
            this.deviceOnline.reverse()
            this.timeData.reverse()
            this.init1()
        },
        init1() {
            this.deviceOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '2%',
                    top: '16%',
                    bottom: '0%',
                    containLabel: true
                },
                color: ['#FF812D', '#00E98C', '#FAB217'],
                legend: {
                    right: 0,
                    data: ['在线数量', '报警次数', '在线率'],
                    textStyle: {
                        color: this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.timeList,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            color: this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: false,
                        axisLabel: {
                            formatter: '{value}',
                            color: this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                        }
                    },
                    {
                        type: 'value',
                        splitLine: false,
                        axisLabel: {
                            formatter: '{value}',
                            color: this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                        }
                    }
                ],
                series: [
                    {
                        name: '在线数量',
                        type: 'bar',
                        tooltip: {  
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: this.timeData
                    },
                    {
                        name: '报警次数',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: this.deviceEarly
                    },
                    {
                        name: '在线率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: this.deviceOnline
                    }
                ]
            }
        },
        init2() {
            this.deviceStatices = {
                tooltip: {},
                grid: {
                    left: '2%',
                    right: '2%',
                    top: '0',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    type: 'value',
                    axisLabel: {
                        color: this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: this.deviceName,
                    axisLabel: {
                        color: this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                    }
                },
                series: [
                    {
                        data: this.devicetot,
                        type: 'bar'
                    }
                ]
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 500px;
}

p {
    margin: 0;
    padding: 0;
}

.device {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .device-list {
        width: 25%;

        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 16px;

        .device-name {
            font-size: 12px;
            margin-top: 10px;
            color: #fff;
        }

        .device-num {
            border: 1px solid rgba(111, 129, 214, 0.8500);
            width: 85px;
            height: 85px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #EFF6FF;
            text-align: center;
            padding: 10px 0;
            border-radius: 100%;
            font-size: 16px;
            color: #fff;

            .num1 {
                color: #52C41A;
                font-size: 20px;
            }
        }
    }
}

.device-echarts {
    padding: 10px 0;
    height: 200px;
}

//浅色
.light {
    .device {
        .device-list {
            .device-name {
                color: #333;
            }
            .device-num {
                // border: 1px solid #FF801E;
                // background: #FFF1E6;
                color: #333;
            }
        }
    }
}
</style>